import React, { useState, useEffect } from 'react'
import { connect } from 'react-redux'
import { Dispatch, bindActionCreators } from 'redux'
import { RootState } from 'src/redux'
//ui
import { Input, Button, List, Typography, Card, Modal, Col, Row } from 'antd';
import styles from './style.module.scss'
//comp
import { WordTagSelectState } from "./reducer";
//redux ds
import * as Action from './reducer'
import { WordTagIndexDto } from '../WordTag/reducer'
import { DeleteOutlined, EditOutlined } from '@ant-design/icons'

export interface WordTagEditProps {
    state: WordTagSelectState
    add: typeof Action.add
    edit: typeof Action.edit
    remove: typeof Action.remove
    fetch: typeof Action.fetch
}

export const _WordTagEdit: React.SFC<WordTagEditProps> = props => {
    const {
        state,
        add, edit, remove, fetch
    } = props
    const [thisValue, setThisValue] = useState('');
    const [addValue, setAddValue] = useState<string>("");
    const [editValue, setEditValue] = useState<string>("");

    const [editModal, setEditModal] = useState(false)
    const [addModal, setAddModal] = useState(false)

    useEffect(() => {
        fetch();
    }, [fetch]);

    return (
        <Card>
            <List
                header={
                    <Typography.Text strong>tag列表</Typography.Text>
                }
                bordered
                dataSource={state.dto.dtos}
                renderItem={(item: WordTagIndexDto, index: number) => {
                    const btnDisable = ((item.wordTagValue === '默认') ? (true) : (false))
                    return (
                        <div>
                            <List.Item
                            >
                                <Row className={styles.listRow}>
                                    <Col span={16} className={styles.valueCol}>
                                        <div>{item.wordTagValue}</div>
                                    </Col>
                                    <Col span={4}>
                                        <Button disabled={btnDisable} icon={<EditOutlined />} onClick={() => {
                                            if (item.wordTagValue !== '默认') {
                                                setEditValue(item.wordTagValue)
                                                setThisValue(item.wordTagValue)
                                                setEditModal(true)
                                            }
                                        }} />
                                    </Col>
                                    <Col span={4}>
                                        <Button disabled={btnDisable} icon={<DeleteOutlined />} onClick={() => {
                                            if (item.wordTagValue !== '默认') {
                                                remove(item.wordTagValue)
                                            }
                                        }} />
                                    </Col>
                                </Row>




                            </List.Item>
                        </div>
                    )
                }}
            />
            <Button onClick={() => setAddModal(true)}>添加</Button>
            <Modal
                title='添加'
                visible={addModal}
                onOk={() => {
                    add(addValue)
                    setAddModal(false)
                }}
                onCancel={() => setAddModal(false)}
            >
                <Input value={addValue} onChange={e => setAddValue(e.target.value)} />
            </Modal>

            <Modal
                title='编辑'
                visible={editModal}
                onOk={() => {
                    console.log(editValue)
                    edit(thisValue, editValue)
                    setEditModal(false)
                }}
                onCancel={() => setEditModal(false)}
            >
                <Input value={editValue} onChange={e => setEditValue(e.target.value)} />
            </Modal>
        </Card>
    )
}

const mapStateToProps = (state: RootState) => ({
    state: state.WordTagSelectState,
})

const mapDispatchToProps = (dispatch: Dispatch) =>
    bindActionCreators({
        add: Action.add,
        edit: Action.edit,
        remove: Action.remove,
        fetch: Action.fetch,
    }, dispatch)

/**
 * 得到当前过滤器并渲染 Link。
 */
const WordTagEdit = connect(
    mapStateToProps,
    mapDispatchToProps
)(_WordTagEdit)

export default WordTagEdit